<template>
	<view>
		<navbar :parameter='parameter'></navbar>
		<view class="title">
			<view class="current-city">当前城市:{{cityName}}</view>
		</view>
		<scroll-view scroll-y="true" :style="{height:winHeight+'px'}" :scroll-into-view="scrollTopId" class="city_list">
			<text class="list_tit">热门城市</text>
			<view class="hot">
				<block v-for="(item,index) in hotCity" :key="index">
					<view class="hot-city" :data-id="item.id" :data-city="item.name" @click="bindCity">{{item.name}}
					</view>
				</block>
			</view>
			<view v-for="(item,index) in city" :key="index">
				<text :id="index" class="list_tit">{{index}}</text>
				<view v-for="(value,key,index) in item" :key="index" class="list_con" :data-id="value.id"
					:data-city="value.name" @tap="bindCity">
					{{value.name}}

				</view>
			</view>
		</scroll-view>
		<!--城市选择列表-->
		<view class="scroll_list" @touchstart="chStart" @touchend="chEnd" @touchmove.stop.prevent="chMove"
			:style="{background:' rgba(0,0,0,'+trans+');'}">
			<block v-for="(item,index) in city" :key="index">
				<block v-if="index != '热门城市'">
					<view class="scroll_list_chi" style="font-size:28rpx;"
						:style="{'line-height':lineHeight+'px',height:lineHeight+'px'}" @touchstart="getWords(index)"
						@touchend="setWords">{{index}}</view>
				</block>
			</block>
		</view>

		<!--选择显示-->
		<view class="showwords" v-if="!hidden">
			{{showwords}}
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import city from "@/common/city.js"
	var lineHeight = 0;
	var endWords = "";
	var isNum;
	export default {
		data() {
			return {
				StatusBar: app.globalData.StatusBar,
				CustomBar: app.globalData.CustomBar,
				"hidden": true,
				cityName: app.globalData.city, //获取选中的城市名
				hotCity: [{
						id: 11,
						name: "合肥市"
					}, {
						id: 11,
						name: "北京市"
					}, {
						id: 12,
						name: "上海市"
					}, {
						id: 13,
						name: "广州市"
					}, {
						id: 14,
						name: "深圳市"
					}, {
						id: 14,
						name: "成都市"
					}, {
						id: 14,
						name: "重庆市"
					},
					{
						id: 14,
						name: "天津市"
					}, {
						id: 14,
						name: "杭州市"
					}, {
						id: 14,
						name: "南京市"
					}, {
						id: 14,
						name: "苏州市"
					}, {
						id: 14,
						name: "武汉市"
					}, {
						id: 14,
						name: "西安市"
					},
				],
				parameter: {
					'navbar': '1',
					'return': '1',
					'title': '城市选择',
					'color': false,
				},
				city: {},
				winHeight: '',
				lineHeight: '',
				scrollTopId: '',
				endWords: '',
				showwords: '',
				trans: '',
			};
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad() {
			this.cityName = app.globalData.city;
		},
		onShow() {
			var cityChild = city.City[0];
			var that = this;
			uni.getSystemInfo({
				success: function(res) {
					lineHeight = (res.windowHeight - 100) / 28;
					console.log(res.windowHeight - 100);
					that.city = cityChild;
					that.winHeight = res.windowHeight - 40;
					that.lineHeight = lineHeight;
				}
			})
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {

		},
		onShareTimeline(res) { //分享到朋友圈

		},
		methods: {
			async areaToId(city) {
				const res = await this.$myRequest({
					url: '/api/index/areaToId',
					data: {
						area: city,
					}
				})
			},
			chStart: function() {
				this.trans = .3;
				this.hidden = false;
			},
			//触发结束选择
			chEnd: function() {
				this.trans = 0;
				this.hidden = true;
				this.scrollTopId = this.endWords;

			},
			//获取文字信息
			getWords: function(id) {
				this.endWords = id;
				isNum = id;
				this.showwords = this.endWords;
			},
			//设置文字信息
			setWords: function(id) {
				this.scrollTopId = id;
			},

			// 滑动选择城市
			chMove: function(e) {
				var y = e.touches[0].clientY;
				var offsettop = e.currentTarget.offsetTop;
				var height = 0;
				var that = this;;
				var cityarr = ["A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "L", "M", "N", "P", "Q", "R", "S",
					"T", "W", "X", "Y", "Z"
				]
				// 获取y轴最大值
				uni.getSystemInfo({
					success: function(res) {
						height = res.windowHeight - 10;
					}
				});

				//判断选择区域,只有在选择区才会生效
				if (y > offsettop && y < height) {
					// console.log((y-offsettop)/lineHeight)
					var num = parseInt((y - offsettop) / lineHeight);
					endWords = cityarr[num];
					// 这里 把endWords 绑定到this 上，是为了手指离开事件获取值
					that.endWords = endWords;

				};


				//去除重复，为了防止每次移动都赋值 ,这里限制值有变化后才会有赋值操作，
				//DOTO 这里暂时还有问题，还是比较卡，待优化
				if (isNum != num) {
					// console.log(isNum);
					isNum = num;
					that.showwords = that.endWords
					console.log(that.showwords)
				}
			},
			//选择城市，并让选中的值显示在文本框里
			bindCity: function(e) {
				console.log(e)
				var cityName = e.currentTarget.dataset.city;
				// var cityID = e.currentTarget.dataset.id;			
				this.areaToId(cityName)
				var pages = getCurrentPages();
				var prevPage = pages[pages.length - 2]; //上一个页面 

				//直接调用上一个页面的setData()方法，把数据存到上一个页面中去
				prevPage.$vm.cityName = cityName;
				app.globalData.city = cityName;
				app.globalData.partner_isshow = true;
				// app.globalData.cityID = cityID;
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		position: relative;
		padding: 10px 0;
	}

	.title_list {
		display: inline-block;
		padding: 0 15px;
		height: 20px;
		line-height: 20px;
		font-size: 16px;
	}

	.title button {
		width: 50px;
		height: 30px;
		font-size: 16px;
		padding: 0;
		line-height: 30px;
		margin: auto;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 10px;
		background: none;
	}

	.title button::after {
		border: none;
	}

	.title_list:nth-child(1) {
		border-right: 1px #ccc solid;
	}

	.current-city {
		display: block;
		line-height: 40px;
		height: 40px;
		padding-left: 15px;
		font-size: 32rpx;
		background: #f5f5f5;
		color: #333;
	}

	/*城市列表*/
	.city_list {
		position: relative;
	}

	/*城市选择头部*/
	.list_tit {
		display: block;
		line-height: 40px;
		height: 40px;
		padding-left: 15px;
		font-size: 28rpx;
		background: #f5f5f5;
		color: #666;
	}

	.list_con {
		height: 40px;
		/*border-top: 1px #f5f5f5 solid ;*/
		line-height: 40px;
		font-size: 28rpx;
		padding-left: 15px;
	}

	.list_con::before {
		content: " ";
		height: 1px;
		border-top: 1px #f5f5f5 solid;
		position: absolute;
		width: 100%;
	}

	.list_con::before:nth-child(1) {
		border: none;
	}

	.hot {
		display: flex;
		justify-content: start;
		align-items: start;
		flex-wrap: wrap;
		padding: 20rpx 30rpx;
	}

	.hot .hot-city {
		background-color: #fff;
		padding: 10rpx 20rpx;
		border-radius: 30rpx;
		display: inline-block;
		margin: 0 10rpx 10rpx 0;
	}

	/*城市选择 右边*/
	.scroll_list {
		background: rgba(0, 0, 0, 0);
		position: fixed;
		height: calc(100% - 200px);
		width: 25px;
		top: 130px;
		right: 10px;
	}

	.scroll_list_chi {
		/*border: 1px blue solid;*/
		text-align: center;
		font-size: 12px;
	}

	/*显示框*/

	.showwords {
		width: 80px;
		height: 80px;
		background: rgba(0, 0, 0, .3);
		border-radius: 50%;
		line-height: 80px;
		text-align: center;
		font-size: 10vw;
		margin: auto;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 999;
	}
</style>
